<template>
	<div class="goods">
		<aside>
			<span>书城管理——商品列表</span>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<button class="btu"><router-link to="/admin/addGoods">添加商品</router-link></button>
		<template>
			<el-table :data="findDate" border style="width: 95%;margin: 0 auto;">
				<el-table-column prop="name" label="名称">
				</el-table-column>
				<el-table-column prop="sn" label="编号">
				</el-table-column>
				<el-table-column prop="author" label="作者">
				</el-table-column>
				<el-table-column prop="maker" label="出版社">
				</el-table-column>
				<el-table-column prop="tmake" label="日期">
				</el-table-column>
				<el-table-column prop="stock" label="库存">
				</el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<el-image style="width: 70px; height: 50px" :src="`${$ip}/api/public/showimg/${scope.row.pic}`">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="dialogFormVisible = true" @click.native.prevent="goUpdate(scope.row.id)"
							type="primary" size="small">
							修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination :page-size="page.lines" @current-change="nextPage" :current-page="page.num"
			layout="prev,pager,next" :total="page.total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'Goods',
		data() {
			return {
				goods: [],
				page: {
					lines: 6,
					num: 1,
					page: 0,
				}
			}
		},
		methods: {
			html() {
				location.reload();
			},
			nextPage(num) {
				//上一页下一页
				console.log(num);
				this.page.num = num; //页数累加
				//边界判断
				// if(this.page.num<1){this.page.num = 1; return}//当页数小于1是等于1
				// if(this.page.num>this.page.total){this.page.num = this.page.total; return}//当页数大于总页数则等于总页数
				this.getPage(); //调用分页查询
			},
			getPage() {
				this.$get('/api/adm/book/findByPage/' + this.page.num + "/" + this.page.lines).then((resp) => {
					console.log(resp.data.data.books)
					this.goods = resp.data.data.books;
					this.page.total = resp.data.data.total;
				})
			},
			goUpdate(id) {
				this.$router.push({
					path: '/admin/addGoods',
					query: {
						id: id
					},
				})
			}
		},
		mounted() {
			this.getPage();
		},
		computed: {
			findDate() {
				this.goods.forEach((item) => {
					let year = new Date(item.tmake).getFullYear();
					let m = new Date(item.tmake).getMonth();
					let day = new Date(item.tmake).getDate();
					item.tmake = `${year}-${m}-${day}`;
				})
				return this.goods;
			}
		}
	}
</script>

<style scoped>
	a {
		color: white;
	}

	.goods {
		width: 83%;
		height: 90vh;
		margin-left: 2%;
	}

	.goods aside {
		width: 95%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: gainsboro 1px solid;
	}

	.goods aside button {
		background-color: #009688;
		border: none;
		outline: none;
		color: white;
		height: 40px;
		width: 60px;
		border-radius: 3px;
	}

	.goods aside span {
		font-size: 15px;
	}

	.goods .btu {
		background-color: #009688;
		color: white;
		border: none;
		outline: none;
		width: 150px;
		height: 40px;
		border-radius: 5px;
		margin-left: 40px;
		margin-bottom: 20px;
	}

	.goods .el-pagination {
		width: 100%;
		text-align: center;
	}
</style>